<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>支付配置</cite></a>
        <a><cite>支付类型</cite></a>
    </span>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">支付类型列表</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-row">
                    <div class="layui-form" style="float:right;">
                        <div class="layui-form-item" style="margin:0;">
                            <div class="layui-input-inline">
                                <input type="text" name="searchPayTypeName" id="searchPayTypeName" placeholder="支付类型名称" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <select name="type" id="searchStatus" placeholder="状态" lay-search="">
                                    <option value="-99">状态</option>
                                    <option value="0">关闭</option>
                                    <option value="1">开启</option>
                                </select>
                            </div>
                            <a id="search" class="layui-btn" data-type="reload"><i class="layui-icon layui-icon-search"></i>搜索</a>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layuiAdmin-btns" style="margin-bottom: 10px;">
                        <a class="layui-btn payTypeAdd" ><i class="layui-icon layui-icon-add-1"></i>新增支付类型</a>
                    </div>
                    <table id="cList" lay-filter="cList"></table>
                </div>
            </div>
        </div>
        <script>
            layui.use(['table','util', 'form', 'admin'], function(){
                var table = layui.table
                    ,$ = layui.$
                    ,form = layui.form
                    ,view = layui.view
                    ,admin = layui.admin
                    ,element = layui.element;

                element.render('breadcrumb', 'breadcrumb');//渲染导航信息

                //标题内容模板
                var tplEdit = function(d){
                    return "<a class='layui-btn layui-btn-xs' lay-event='edit'><i class='layui-icon layui-icon-edit'></i>编辑</a>";
                };

                var tplType = function(d){
                    if(d.type == 1) {
                        return "支付";
                    }else if(d.type == 2) {
                        return "代付";
                    }
                };

                var tplStatus = function(d){
                    var checkedHtml = " payTypeCode='"+d.payTypeCode+"' ";
                    if(d.status == 1) {
                        checkedHtml += " checked";
                    }
                    return '<input type="checkbox" lay-filter="statusSwitch" lay-skin="switch" '+checkedHtml+' lay-text="启用|停用">';
                };

                table.render({
                    elem: '#cList'
                    ,url: layui.setter.baseUrl + '/config/pay_type/list'
                    ,where: { access_token: layui.data(layui.setter.tableName).access_token}
                    ,id: 'tableReload'
                    ,cols: [[
                        {field:'payTypeCode', title: '支付类型代码'}
                        ,{field:'payTypeName',  title: '支付类型名称'}
                        ,{field:'type', title: '类别',templet: tplType }
                        ,{field:'status', title: '状态',templet: tplStatus }
                        ,{field:'edite', width: 100, title: '操作', templet: tplEdit}
                    ]]
                    ,page: true
                    ,skin: 'line'
                });

                //监听工具条
                table.on('tool(cList)', function(obj){
                    var data = obj.data;
                    if(obj.event === 'edit'){
                        view.xxpayPopup("支付配置", "config/pay_type/update", {payTypeCode: data.payTypeCode}, {area:['70%','70%']});
                    }
                });

                $('.payTypeAdd').click(function(){
                    view.xxpayPopup("新增支付类型", "config/pay_type/create", {null: null}, {area:['70%','70%']});
                });

                form.on('switch(statusSwitch)', function(data){

                    var payTypeCode = $(data.elem).attr('payTypeCode');
                    var updateState = data.elem.checked ? "1" : "0";
                    var loadingIndex = layer.load();
                    admin.req({
                        type: "POST",
                        url: layui.setter.baseUrl + '/config/pay_type/update',
                        data: {payTypeCode: payTypeCode, status: updateState},
                        success: function(res){
                            if(res.code == 0) {
                                table.reload('tableReload');
                            }
                        },
                        complete:function(){
                            layer.close(loadingIndex);
                        }
                    });
                });

                // 搜索
                var $ = layui.$, active = {
                    reload: function(){
                        var payTypeName = $('#searchPayTypeName').val();
                        var status = $("#searchStatus").val();
                        //执行重载
                        table.reload('tableReload', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            ,where: {
                                payTypeName: payTypeName,
                                status: status
                            }
                        });
                    }
                };

                $('#search').on('click', function() {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                    return false;
                });

                // 渲染表单
                form.render();

            });

        </script>
    </div>
</div>
